<template>
	<div class="addressList">
		<div class="lz-header">
			<div
				style="display: flex;margin-bottom: 10px;align-items: center;flex-wrap: wrap;">
				<div style="margin-right: 10px;">
					<el-button type="primary" icon="el-icon-circle-plus-outline" :size="size" @click="customerAdd()">添加
					</el-button>
				</div>
				<div>
					<el-button type="primary" icon="el-icon-circle-plus-outline" :disabled="table.selectList.length==0" :size="size" @click="customerDelete()">删除
					</el-button>
				</div>
			</div>
		</div>
		<el-table :data="table.list" border :size="size" :header-cell-style="headerCellStyle" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" ></el-table-column>
			<el-table-column prop="materialNo" name="商品编号" :label="computeInputBox('materialNo','label')" width="160"  sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.materialNo" @focus="focusFn(scope.row)" placeholder="选取商品编号" :size="size" class="lz-placeholder-color"></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="materialName" name="商品名称" :label="computeInputBox('materialName','label')" width="120"  sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.materialName" :size="size" disabled></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="materialDescription" name="商品描述" :label="computeInputBox('materialDescription','label')" show-overflow-tooltip  width="120"
				sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.materialDescription" :size="size" disabled></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="materialUnit" name="基本单位" :label="computeInputBox('materialUnit','label')" show-overflow-tooltip  width="120" sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.materialUnit" :size="size" disabled></el-input>
				</template>
			</el-table-column>
			<el-table-column prop="siteNo" name="地点编号" :label="computeInputBox('materialDescription','label')" show-overflow-tooltip  width="120" sortable>
				<template slot-scope="scope">
					<el-select v-model="scope.row.siteNo" placeholder="请选择" :size="size"
						clearable  :disabled="computeInputBox('siteNo','disabled')" style="width: 100%;">
						<el-option v-for="item in siteNoList" :key="item.id" :label="item.siteName"
							:value="item.siteNo"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="saleChannelNo" name="分销编号" :label="computeInputBox('saleChannelNo','label')" show-overflow-tooltip  sortable width="120">
				<template slot-scope="scope">
					<el-select v-model="scope.row.saleChannelNo" placeholder="请选择" :size="size"
						clearable  :disabled="computeInputBox('saleChannelNo','disabled')" style="width: 100%;">
						<el-option v-for="item in saleChannelNoList" :key="item.id" :label="item.saleChannelName"
							:value="item.saleChannelNo"></el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="price" name="单价" :label="computeInputBox('price','label')" sortable width="120">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.price" :min="0" :max="99999999" :precision="2" :size="size" style="width: 100%;" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="fromQuantity" name="起订量始" :label="computeInputBox('fromQuantity','label')"   width="120"  sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.fromQuantity" :min="0"  :max="99999999" :size="size" style="width: 100%;" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="toQuantity" name="起订量止" :label="computeInputBox('toQuantity','label')"  width="120" sortable>
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.toQuantity" :min="0" :max="99999999" :size="size" style="width: 100%;" ></el-input-number>
				</template>
			</el-table-column>
			<el-table-column prop="note" name="备注" :label="computeInputBox('note','label')" sortable>
				<template slot-scope="scope">
					<el-input v-model="scope.row.note" :size="size" :maxlength="100"></el-input>
				</template>
			</el-table-column>
		</el-table>
		<!-- 商品列表-->
		<CommodityNumber @submit="bindConfiguration" ref="CommodityNumber"></CommodityNumber>
	</div>
</template>

<script>
	let that;
	import {
		mapGetters
	} from 'vuex';
	import lzRowCol from '@/components/lzRowCol/lzRowCol';
	// 商品列表
	import CommodityNumber from '@/components/CommodityNumber/CommodityNumber'
	export default {
		components: {CommodityNumber},
		name: 'addressList',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			...mapGetters(['size', 'themeBtColor', 'api', 'headerCellStyle', 'InputBoxList']),
			//计算出当前输入框配置信息
			computeInputBox() {
				return (field, type) => {
					let arr = this.InputBoxList.find(item => item.fieldName == field)
					if (arr && type == 'show') {
						return arr.isVisible == 0 ? true : false //0为显示1为隐藏
					}
					if (arr && type == 'isInput') {
						return arr.isInput == 0 ? field : '' //0为必填1为不必填
					}
					if (arr && type == 'disabled') {
						return arr.isDisplay == 0 ? true : false //0为只读1为可读写
					}
					if (arr && type == 'label') {
						return arr.fieldLabel //标签动态显示名称
					}
					return false
				}
			}
		},
		data() {
			return {
				//表格数据
				table: {
					list: [],
					selectList: [], //多选
					focusRow:'',//当前获取光标是行的信息
				},
				saleChannelNoList:[],//分销编号列表
				siteNoList:[],//地点编号列表
			};
		},
		watch:{
			'table.list':{
				handler:function(newV,oldV){
					this.$emit('updataDataAddressList', newV)
				},
				deep:true
			}
		},
		mounted() {
			that = this;
			//获取分销编号列表
			that.saleChannel_list()
			//获取地点编号列表
			that.site_list()
		},
		methods: {
			//点击查看
			SeeRuleForm(row){
				that.table.list=row.materialPriceDetailList
			},
			//弹框确定
			bindConfiguration(data) {
				//找到之前获取光标的那一行信息，进行赋值
				that.table.list=that.table.list.map(item=>{
					if(item.id==that.table.focusRow.id){
						item.materialNo=data.materialNo
						item.materialName=data.materialName
						item.materialDescription=data.materialDescription
						item.materialUnit=data.materialUnit
					}
					return item
				})
			},
			//获取到光标
			focusFn(row){
				that.table.focusRow=row
				that.$refs.CommodityNumber.focusFn()
			},
			//删除
			customerDelete(){
				that.table.selectList.forEach(res=>{
					that.table.list=that.table.list.filter(item=>{
						return item.id!=res.id
					})
				})
			},
			// 多选
			handleSelectionChange(val) {
				that.table.selectList=val
			},
			//添加操作
			customerAdd(text, event) {
				that.table.list.push({
					id:that.$lizhao.guid(),//全局唯一ID
					materialNo: '', //商品编号
					materialName: '', //商品名称
					materialDescription: '', //商品描述
					materialUnit: '', //基本单位
					siteNo: '', //地点编号
					saleChannelNo: '', //分销编号
					price: '', //单价
					fromQuantity: '', //起订量始
					toQuantity: '', //起订量止
					note: '', //备注
				})
			},
			//获取地点编号列表
			site_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_site_list, {}, function(res) {
					if (res.code == 200) {
						that.siteNoList=res.result
					}
				});
			},
			//获取分销编号列表
			saleChannel_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_saleChannel_list, {}, function(res) {
					if (res.code == 200) {
						that.saleChannelNoList=res.result
					}
				});
			},
			//重置
			Reset() {
				that.table.list = [{
					id:that.$lizhao.guid(),//全局唯一ID
					materialNo: '', //商品编号
					materialName: '', //商品名称
					materialDescription: '', //商品描述
					materialUnit: '', //基本单位
					siteNo: '', //地点编号
					saleChannelNo: '', //分销编号
					price: '', //单价
					fromQuantity: '', //起订量始
					toQuantity: '', //起订量止
					note: '', //备注
				}]
			},

		}
	};
</script>

<style lang="scss" scoped>
	.addressList {
		.lz-header {}

		.el-pagination {
			float: right;
			margin: 10px 0;
		}
	}
</style>
